<template>
  <el-dialog
    v-el-drag-dialog
    :title="title"
    :visible.sync="videoDialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <div style="width:100%;">
      <video
        id="video"
        ref="videoPlay"
        :key="videoUrl"
        :autoplay="true"
        controls
        style="width:100%;"
      >
        <!-- <source type="application/x-mpegURL"> -->
        <!-- :src="videoUrl" -->
      </video>
    </div>
  </el-dialog>
</template>

<script>
import videoinit from '@/utils/video-init.js'
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  name: 'VideoDialog',
  directives: { elDragDialog },
  props: {
    title: {
      type: String,
      required: true
    },
    videoUrl: {
      type: String,
      required: true
    },
    videoDialogVisible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      player: null,
      videoPlayFlag: '',
      EZUIKit: null
    }
  },
  watch: {
    videoUrl(newValue) {
      videoinit.init().then(EZUIKit => {
        this.$refs.videoPlay.src = newValue
        this.player = new EZUIKit.EZUIPlayer('video')
        this.player.on('log', this.logFunc)
      })
    }
  },
  // mounted() {
  //   this.$refs.videoPlay.load()
  //   this.player = new EZUIPlayer('video')
  // },
  // updated() {
  //   this.$nextTick(() => {
  //     console.log(111)
  //     this.$refs.videoPlay.load()
  //     this.player = new EZUIPlayer('video')
  //   })
  // },
  methods: {
    logFunc(str) {
      console.log(JSON.stringify(str))
    },
    // newVideo() {
    //   this.player = new EZUIPlayer('video')
    // },
    handleClose() {
      if (this.player !== null) {
        this.player.stop()
      }
      // this.videoUrl = ''
      this.$emit('close')
    }
  }
}
</script>

<style scoped>

</style>
